<template>
	<el-form ref="loginFormRef" size="large" class="login-content-form" :model="loginData" :rules="loginData.loginRules">
		<el-form-item prop="stuNum" class="login-animation1">
			<el-input type="text" placeholder="请输入账号" v-model="loginData.stuNum" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="password" class="login-animation2">
			<el-input
				type="password"
				placeholder="请输入密码"
				v-model="loginData.password"
				autocomplete="off"
				@input="setPs"
				clearable
			>
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round @click="submitFormLogin(loginFormRef)" :loading="loginIng">
				<span>登录</span>
			</el-button>
		</el-form-item>
		<div class="font12 mt30 login-animation4 login-msg">* 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62 及以上浏览器，360浏览器请使用极速模式'</div>
	</el-form>
</template>

<script lang="ts" setup>
import {  reactive, computed ,ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { validatorPassword } from '/@/utils/login.ts';
import md5 from 'js-md5';
import  { login } from "/src/views/login/login";
import { useUserInfo } from '/@/stores/userInfo'

const storesUserInfo = useUserInfo();

const route = useRoute();
const router = useRouter();
const loginIng = ref(false);
const loginFormRef = ref();
// 时间获取
const currentTime = computed(() => {
	return formatAxis(new Date());
});
const Render = ref(null);
const loginData = reactive({
	stuNum: Session.getCookie('yourStuNum'),
	password: Session.getCookie('yourPassword'),
	render: '',
	loginRules: {
		stuNum: [{ required: true, trigger: 'blur' }],
		password: [{ validator: validatorPassword, trigger: 'blur' }],
	},
});

const setPs = () => {
	Session.setCookie('yourPassword', '');
};
function mylogin() {
	const flag = loginData.password.length > 20;
	return flag ? md5(loginData.password) : md5(md5(loginData.password));
}
const submitFormLogin = (formEl) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			loginIng.value = true;
			login( {
						id: loginData.stuNum,
						password: mylogin(),
					}
				)
				.then(async (res) => {
          console.log("test",res)
					loginIng.value = false;
					if (res.success) {
						// store.state.userInfo.isTourist = false
						// store.state.userInfo.id = loginData.stuNum
						Session.setCookie('token',res.data.token);
						if (!Session.getCookie('yourPassword')) {
							Session.setCookie('yourPassword', md5(loginData.password));
						}

						Session.setCookie('yourStuNum', loginData.stuNum);
						//storeuserinfo
            console.log(res)
							await initFrontEndControlRoutes();
							signInSuccess();
					} else {
						changRender();
						loginData.render = '';
					}
				}).catch(() => {
					loginIng.value = false;
				})
		} else {
			ElMessage({
				type: 'error',
				message: '请完善信息 !!!',
			});
			return false;
		}
	});
};
function changRender() {
	Render.value.src = Render.value.src.split('?')[0] + '?' + Math.floor(Math.random(10) * 10);
}
// 登录成功后的跳转
const signInSuccess = () => {
	// 初始化登录成功时间问候语
	let currentTimeInfo = currentTime.value;
	// 登录成功，跳到转首页
	// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
	if (route.query?.redirect) {
		router.push({
			path: <string>route.query?.redirect,
			query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
		});
	} else {
		router.push('/');
	}
	// 登录成功提示
	// 关闭 loading
	// state.loading.signIn = true;
	const signInText = '登录成功';
	ElMessage.success(`${currentTimeInfo}，${signInText}`);
	// 添加 loading，防止第一次进入界面时出现短暂空白
	NextLoading.start();
};

</script>

<style scoped lang="scss">
.login-content-form {
	.login-msg {
		color: var(--el-text-color-placeholder);
	}
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}
</style>
